<template>
  <view
    :class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true' }"
    class="uni-card"
    @click="onClick"
  >
    <view v-if="mode === 'style'" class="uni-card__thumbnailimage">
      <view class="uni-card__thumbnailimage-box">
        <image class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
      </view>
      <view v-if="title" class="uni-card__thumbnailimage-title">
        <text class="uni-card__thumbnailimage-title-text">{{ title }}</text>
      </view>
    </view>
    <view v-if="mode === 'title'" class="uni-card__title ui-flex flex--vcenter">
      <view class="card-header--image">
        <image class="card-header--image-image" :src="thumbnail" mode="scaleToFill" />
      </view>
      <view class="card-title--content ui-flex flex--center flex--space-between">
        <text class="uni-card__title-content-title">{{ title }}</text>

        <view class="card--title-extra">
          <text class="uni-card__title-content-extra">{{ extra }}</text>
          <uiIcon name="ui-icon-arrow"></uiIcon>
        </view>
      </view>
    </view>
    <!-- 标题 -->
    <view v-if="mode === 'basic' && title" class="uni-card__header">
      <view v-if="thumbnail" class="uni-card__header-extra-img-view">
        <image :src="thumbnail" class="uni-card__header-extra-img" />
      </view>
      <text class="uni-card__header-title-text">{{ title }}</text>
      <text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
    </view>
    <!-- 内容 -->
    <view
      class="uni-card__content uni-card__content--pd"
      :class="{ 'card--content-cell' : isCell }"
    >
      <view v-if="mode === 'style' && extra" class>
        <text class="uni-card__content-extra">{{ extra }}</text>
      </view>
      <slot />
    </view>
    <!-- 底部 -->
    <view v-if="note" class="uni-card__footer">
      <slot name="footer">
        <text class="uni-card__footer-text">{{ note }}</text>
      </slot>
    </view>
  </view>
</template>

<script>
import uiIcon from "@/components/base/icon/index";

export default {
  name: "uiCardPage",
  components: { uiIcon },
  props: {
    title: {
      type: String,
      default: ""
    }, // 标题
    extra: {
      type: String,
      default: ""
    }, // 扩展信息
    note: {
      type: String,
      default: ""
    }, // Tips
    thumbnail: {
      type: String,
      default: ""
    }, // 缩略图
    // 卡片模式 ， 可选值 basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片
    mode: {
      type: String,
      default: "basic"
    },
    isFull: {
      // 内容区域是否通栏
      type: Boolean,
      default: false
    },
    isShadow: {
      // 是否开启阴影
      type: Boolean,
      default: false
    },
    isCell: {
      // 内容区域是否通栏
      type: Boolean,
      default: false
    },
    link: {
      // 是否开启阴影
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      this.$emit("click");
    }
  }
};
</script>

<style lang="scss" scoped src="./index.scss">
</style>
